<!-- 添加小区 -->
<template>
	<el-dialog
		:close-on-click-modal="false"
		:close-on-press-escape="true"
		:title="title"
		v-model="isVisible"
		width="900px"
		destroy-on-close
		draggable
		align-center
		@close="close"
	>
		<el-row>
			<div class="flex1"></div>
			<el-space>
				<template v-if="orgId == 100">
					<el-tree-select
						v-model="data.queryParams.deptId"
						:data="props.deptData[0].children"
						:props="{
							label: 'deptName',
							value: 'deptId',
							children: 'children',
						}"
						:render-after-expand="false"
						:clearable="true"
					/>
				</template>
				<el-input v-model="data.queryParams.keyWord" size="default" placeholder="小区名" clearable />
				<el-button class="filter-item" plain type="primary" size="default" @click="search()"> 搜索 </el-button>
			</el-space>
		</el-row>

		<el-table ref="myTable" v-loading="data.loading" :data="data.tableData.list" border @row-click="rowClick" style="margin-top: 10px">
			<el-table-column align="center" type="selection" :selectable="selectable" width="40px" />
			<el-table-column label="组织" prop="deptId">
				<template #default="{ row }">
					<span>{{ props.deptMap[row.deptId] }}</span>
				</template>
			</el-table-column>
			<el-table-column label="小区" prop="name" />
			<el-table-column label="地址" prop="address" />
		</el-table>

		<!-- 分页 -->
		<pagination
			:total="data.tableData.total"
			v-model:page="data.queryParams.pageNum"
			v-model:limit="data.queryParams.pageSize"
			@pagination="search"
		/>

		<template #footer>
			<div class="dialog-footer">
				<el-button plain type="warning" size="default" @click="close"> 取消 </el-button>
				<el-button plain type="primary" size="default" @click="sure"> 确定 </el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup name="Edit">
import { computed, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElMessageBox, FormInstance, FormRules } from 'element-plus';
import { useSmoke } from '/@/hook/index';
import { useUserInfo } from '/@/stores/userInfo';
import { storeToRefs } from 'pinia';
import communityApi from '/@/api/smoke/community';
import alarmManageApi from '/@/api/smoke/alarmManage';

const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
const orgId = ref(userInfos.value.deptId);
const props = defineProps({
	dialogVisible: {
		type: Boolean,
		default: false,
	},
	type: {
		type: String,
		default: 'add',
	},
	userId: {
		type: [String, Number],
		default: '',
	},
	ids: {
		type: Array,
		default: () => {
			return [48, 47, 46];
		},
	},
	deptData: {
		type: <any>Array,
		default: () => {
			return [];
		},
	},
	deptMap: {
		type: Object,
		default: () => {
			return {};
		},
	},
});

let isVisible = computed(() => {
	return props.dialogVisible;
});

// emit
const emit = defineEmits(['close', 'success']);

const title = computed(() => {
	return props.type == 'add' ? '新增' : '修改';
});

const myTable = ref();
const noData = ['其他', '安装人员'];
const data = reactive({
	loading: false,
	tableData: {
		list: <any>[],
		total: 0,
	},
	queryParams: {
		keyWord: '',
		deptId: '',
		pageNum: 1,
		pageSize: 10,
	},
	curSelect: '',
	curRow: null,
	selected: [],
	selectedIds: [],
});

onMounted(() => {
	search();
});

// 控制是否可以选择
function selectable(row: any) {
	return !props.ids.includes(row.id);
}

// 表格行点击 选中
function rowClick(row: any) {
	if (props.ids.includes(row.id)) return; // 如果是禁止点击的，不要做切换
	myTable.value!.toggleRowSelection(row, undefined);
}

// search
function search() {
	data.loading = true;
	communityApi.getCommunityList(data.queryParams).then((res: any) => {
		data.tableData = res.data;
		data.loading = false;
	});
}

// 对话框关闭
function close() {
	emit('close');
}

// 新增
function sure() {
	let Rows = myTable.value.getSelectionRows();
	let submitData = {
		userId: props.userId,
		communityIds: Rows.map((item: any) => item.id),
	};
	alarmManageApi.alarmUserAdd(submitData).then((res: any) => {
		ElMessage.success('新增成功');
		emit('success');
	});
}

// function onOrgSelect(orgData: any) {
// 	data.queryParams.subOrgId = orgData.dept.id;
// 	search();
// }
</script>

<style lang="scss" scoped>
:v-deep {
	.el-checkbox__input.is-disabled .el-checkbox__inner {
		background-color: #dcdfe6;
	}

	.el-dialog__body {
		padding: 0 20px !important;
	}
}
</style>
